<template>
  <div class="coma">
    <p>单项数据流：单项下行，父组件数据的的变化会影响子组件；但是子组件不能修改父组件的值。特例：引用数据类型可以修改</p>
    <p class="p1">子组件：{{msg.info}}，这是我项目中的第一个组件</p>
    <h1>父组件传过来的值1：{{msg1}}</h1>
    <h1>父组件传过来的值2：{{msg2}}</h1>
    <h1>父组件传过来的值3：{{msg3.age}}</h1>
    <h1>父组件传过来的值4：{{msg4}}</h1>
    <h1>父组件传过来的值5：{{msg5}}</h1>
    <h1>父组件传过来的值6：{{msg6}}</h1>
    <button @click="change">click-子组件</button>
  </div>
</template>
<script>
export default {
  // 父传子2  通过props接受数据
  // props: ['msg1', 'msg2', 'msg3'], // 简单的接收，没有校验
  props: {
    msg1: String, // 指定数据类型
    msg2: [Array, String], // 指定多个数据类型
    msg3: { // 指定数据类型
      type: Object
    },
    msg4: {
      // 必填项。这个情况和msg5一般不会共存
      required: true
    },
    msg5: {
      // 默认值。如果有值就用传入的，没有就用默认的
      default: 'hello'
    },
    msg6: {
      validator: function(val) {
        // return后面是判断条件，不符合条件会报错
        return val.age >= 18
      }
    }
  },
  data() {
    return {
      msg: {
        info: '哈哈哈'
      }
    }
  },
  methods: {
    change() {
      console.log(this.msg3);
      this.msg3.age = 69;
    }
  }
}
</script>
<style>
  .coma .p1 {
    color: #56a5f1
  }
</style>